<template>

  <el-menu
    :default-active="activeIndex2"
    class="el-menu"
    mode="horizontal"
    @select="handleSelect"
    background-color="#E8F5E9"
    text-color="#66BB6A"
    active-text-color="#1B5E20"
    style="padding-left: 330px;
  font-family: 'Roboto',sans-serif;
  font-weight:bold;">
    <el-menu-item index="0" disabled><i class="el-icon-share"></i></el-menu-item>
    <el-menu-item index="/Home">首页</el-menu-item>
    <el-menu-item index="/MoreJobInfo">职位</el-menu-item>
    <el-menu-item index="/MoreCompany">公司</el-menu-item>
    <el-menu-item index="/MoreNotice">公告</el-menu-item>

    <el-submenu v-if="Loginkey" style="margin-left: 916px;" index="5">
      <template #title>
        <el-image style="width: 35px; height: 35px;border-radius: 50%" :src="head_imag"></el-image>
      </template>
      <div
        style=" font-family:  -apple-system,'BlinkMacSystemFont','Helvetica Neue','Arial',sans-serif;font-weight:normal;">
        <el-menu-item><p style="padding: 0;margin: 0;" @click="goto_back">个人空间</p></el-menu-item>
        <el-menu-item ><p style="padding: 0;margin: 0;" @click="Login_out">退出</p></el-menu-item>
      </div>
    </el-submenu>


    <button v-if="!Loginkey" class="login-button-style" @click="goto_login">登 录</button>


  </el-menu>

</template>

<script>
import axios from 'axios'

export default {
  name: 'headmenu',
  data () {
    return {
      activeIndex2: '',
      Loginkey: false,
      head_imag:''
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      this.$router.push({
        path: key,
        params: { data: 'query' }
      })
    },
    goto_login () {
      this.$router.push('/Weblogin')
    },
    goto_back(){
      var _this=this
      // console.log(JSON.parse(localStorage.getItem("Token"))[0]["Token"])

      console.log(JSON.parse(localStorage.getItem("Token")))
      axios.post('http://localhost:8080/getLoginInfo',JSON.parse(localStorage.getItem("Token"))[0])
        .then(function (response) {
          console.log(response.data)
          console.log(response.data.account_number)
          console.log(response.data.role_type)
          console.log(response.data.role_id)
          //commit调用mutation中的函数，而第二个参数为commit调用方法中的入参
          _this.loading = false
          localStorage.getItem("Token")
          // console.log(_this.$store.getters.get_Token)
          if(response.data.role_type === 'student'){
            window.open("http://localhost:8088/Back")
          }
          else if(response.data.role_type === 'company'){
            window.open("http://localhost:8088/Back")
          }
          else{
            window.open("http://localhost:8088/Back")
          }
        })
        .catch(function (error) {
          console.log(error);
        });

    },
    Login_out () {
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.Loginkey = false
        localStorage.removeItem("username")
        localStorage.removeItem('Token')
        this.$message({
          type: 'success',
          message: '成功退出登录!'
        });
        this.$router.push('/Home')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登录'
        });
      });
    }
  },
  created: function () {

    let _this = this
    axios.post('http://localhost:8080//FindUserImage?UserID=' + eval(localStorage.getItem('username')))
      .then(function (response) {
        console.log(response.data)
        const temp = response.data.student_imagepath.substr(17)
        _this.head_imag = require('E:/job/UserImage/' + temp)

      })
      .catch(function (error) {
        console.log(error)
      })

    this.activeIndex2 = '/' + this.$router.currentRoute.value.name
    switch (this.$router.currentRoute.value.name) {
      case 'DetailNotice':
        this.activeIndex2 = '/MoreNotice'
        break
      case 'Home':
        this.activeIndex2 = '/Home'
        break
      case 'DetailJobInfo':
        this.activeIndex2 = '/MoreJobInfo'
        break
      case 'DetailCompany':
        this.activeIndex2 = '/MoreCompany'
        break
      case 'MoreJobInfo':
        this.activeIndex2 = '/MoreJobInfo'
        break
      case 'MoreCompany':
        this.activeIndex2 = '/MoreCompany'
        break
      case 'MoreNotice':
        this.activeIndex2 = '/MoreNotice'
        break

    }
    console.log(this.activeIndex2)
    console.log(localStorage.getItem('Token'))
    if (localStorage.getItem('Token')) {
      this.Loginkey = true
    }

  },
  watch: {
    $route (to, from) {
      switch (this.$router.currentRoute.value.name) {
        case 'DetailNotice':
          this.activeIndex2 = '/MoreNotice'
          break
        case 'Home':
          this.activeIndex2 = '/Home'
          break
        case 'DetailJobInfo':
          this.activeIndex2 = '/MoreJobInfo'
          break
        case 'DetailCompany':
          this.activeIndex2 = '/MoreCompany'
          break
        case 'MoreJobInfo':
          this.activeIndex2 = '/MoreJobInfo'
          break
        case 'MoreCompany':
          this.activeIndex2 = '/MoreCompany'
          break
        case 'MoreNotice':
          this.activeIndex2 = '/MoreNotice'
          break

      }
    }
  }
}
</script>

<style>
.el-menu-item:hover {
  background-color: #C8E6C9 !important;

}

.login-button-style {
  margin-left: 916px;
  margin-top: 10px;
  background: rgb(232, 245, 233);
  height: 40px;
  border: 0;
  font-weight: bold;
  color: rgb(102, 187, 106);
}

.login-button-style:hover {
  color: #2e7d32;
  cursor: pointer;
}

</style>
